<template>
	<view class="pageBox" v-if="isLoad">
		<image class="topBG" src="@/static/common/givenTopBG.png" mode="scaleToFill"></image>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<view class="contentBox">
			<view class="cardBox">
				<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm" labelWidth="160rpx">
					<!-- <u-form-item label="用户名" prop="username" borderBottom>
						<u--input v-model="userInfo.username" placeholder="请选输入用户名" border="none"></u--input>
					</u-form-item> -->
					<u-form-item label="手机号码" prop="phone" borderBottom>
						<u--input v-model="userInfo.phone" placeholder="请输入手机号码" border="none"></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="password" borderBottom>
						<u--input v-model="userInfo.password" type="password" placeholder="请选输入密码"
							border="none"></u--input>
					</u-form-item>
					<!-- <view class="inputTip">默认密码：123456</view> -->
					<view style="margin-top: 80rpx;"></view>
					<view class="btnList">
						<u-button class="btn" @click="$navTo('pages/register/register')" shape="circle">去注册</u-button>
						<u-button class="btn" @click="submit" shape="circle" type="primary">登录</u-button>
					</view>
				</u--form>
			</view>
		</view>
		<!-- <u-button @click="WXH5Lgoin" shape="circle" type="primary">一键登录</u-button> -->
	</view>
</template>

<script>
	import Config from '@/core/config.js'

	export default {
		data() {
			return {
				//微信小程序
				mpwx: true,
				//微信h5
				wxH5: false,
				first: true,
				showSex: false,
				// 数据加载完成 [防止在微信小程序端onLoad和view渲染同步进行]
				isLoad: false,
				userInfo: {
					username: '',
					password: '',
					openId: '',
					phone: '',
					// username: 'cs',
					// phone: '15777777777',
				},
				// userInfo: {
				// 	username: '',
				// 	password: '',
				// 	openld: ''
				// },
				options: {
					code: null,
					state: null
				},
				rules: {
					'username': {
						type: 'string',
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur']
					},
					'phone': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
				},
			};
		},
		mounted() {

			if (this.$store.getters.platform === 'H5-WEIXIN') {
				this.wxH5 = true
			} else {
				this.wxH5 = false
			}
			if (this.$store.getters.platform === 'MP-WEIXIN') {
				this.mpwx = true
			} else {
				this.mpwx = false
			}
		},
		created() {
			console.log('created');
			let params = this.getRequestParams();
			let code = params['code']; // 参数名
			console.log(code);
		},
		async onLoad(options) {
			// let params = this.getRequestParams();
			// let code = params['code']; // 参数名
			// // 数据加载完成
			this.isLoad = true
			// this.options = options
			// this.wxH5 = this.$store.getters.platform === 'H5-WEIXIN'
			// const token = this.$store.getters.token
			// if (this.wxH5 && this.first && options.code) {
			// 	const secret = this.options.state
			// 	this.wxH5Login(options.code)
			// } else {
			// 	this.WXH5Lgoin()
			// }
			// this.options.secret = uni.getStorageSync('secret')
		},
		onShow() {
			console.log('show');
		},
		methods: {
			//微信内置浏览器
			wxH5Login(code) {
				this.first = false
				const secret = this.options.state
				this.$store.dispatch('wxH5Login', {
					code,
					secret
				}).then(res => {
					this.userInfo.openId = res.openId
					if (res.user) {
						this.$navTo('pages/index/index', {}, 'redirectTo')
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取utl参数
			getRequestParams() {
				let url = window.location.href;
				let requestParams = {};
				if (url.indexOf('?') !== -1) {
					let str = url.substr(url.indexOf('?') + 1); //截取?后面的内容作为字符串
					// console.log(str, '?后面的内容');
					let strs = str.split('&'); //将字符串内容以&分隔为一个数组
					// console.log(strs, '以&切割的数组');
					for (let i = 0; i < strs.length; i++) {
						requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
						// 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
					}
				}
				// console.log(requestParams, '处理后的对象');
				return requestParams;
			},
			WXH5Lgoin() {
				const url = encodeURIComponent(`${Config.h5Login}/pages/login/login`)
				// wx9b3a37b82826ea43
				location.href =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9b3a37b82826ea43&redirect_uri=${Config.h5Login}/pages/login/login&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`
			},
			getUserInfo() {
				const that = this
				this.$store.dispatch('userBaseInfo').then(res => {
					if (res.user) {
						// if (res.user.userType == 'rc' || res.user.userType == 'yk') {
						that.$navTo('pages/index/index', {}, 'redirectTo')
						// } else if (res.user.userType == 'sj') {
						// 	that.$navTo('pages/Merchant/Merchant', {},
						// 		'redirectTo')
						// }
					}
				})
			},
			async submit() {
				const that = this
				await this.$refs.uForm.validate().then(res => {
					uni.$u.throttle(this.$store.dispatch('Login', this.userInfo).then(res => {
						// that.$toast1('登录成功', setTimeout(() => {

						// }, 600))
						that.getUserInfo()
					}), 700)

				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>
<style lang="scss" scoped>
	.inputTip {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #f56c6c;

	}

	page {
		background-color: #F4F7FF;
	}

	.pageBox {
		padding: 0 30rpx;
		position: relative;
		box-sizing: border-box;

		.btnList {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn {
				width: 48%;
			}
		}

		.topBG {
			flex-shrink: 0;
			top: 0;
			left: 0;
			position: absolute;
			width: 100%;
			height: 646rpx;
			object-fit: cover;
		}

		.contentBox {
			z-index: 10;
			position: relative;
			padding-top: 320rpx;


			.cardBox {
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 60rpx 30rpx 40rpx 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				margin-bottom: 50rpx;
			}
		}

		.loginBtn {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: #00c800;
			margin: 0;
			padding: 0;
			height: 70rpx;
			border-radius: 50rpx;
			margin-top: 200rpx;

			.loginBtn-text {
				font-size: 30rpx;
				margin-left: 10rpx;
			}
		}

		.button {
			background: linear-gradient(90deg, #5F96E8 0%, #1977E1 100%);
		}
	}
</style>